import React, { FC, useEffect, useState } from 'react';
import { IndexModelState, ConnectProps, Loading, connect } from 'umi';
import { Button, Select, Card } from 'antd';
import FaqManage from '@/pages/FaqManage';
import { setSkin } from '@/utils';
import styles from './index.less';

const { Option } = Select;

interface PageProps extends ConnectProps {
  index: IndexModelState;
  loading: boolean;
}

const IndexPage: FC<PageProps> = ({ index, dispatch }) => {
  const { siteConfig } = index;
  const { name } = siteConfig || {};

  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'index/getSiteConfig',
      });
    }
  }, []);

  const changeSkin = (value: string) => {
    console.log(1111, value);

    switch (value) {
      case '1':
        setSkin('#27A3FF', '#149BFF');
        break;
      case '2':
        setSkin('#45459f', '#32328c');
        break;
      case '3':
        setSkin('#F60001', '#F60001');
        break;
      default:
        break;
    }
  };
  console.log('网页标题', name);
  return (
    <div>
      <Card bordered={false}>
        主题：
        <Select defaultValue="2" onChange={changeSkin}>
          <Option value="1">蓝色</Option>
          <Option value="2">紫色</Option>
          <Option value="3">红色</Option>
        </Select>
      </Card>
      <FaqManage />
    </div>
  );
};

const Index = connect(
  ({ index, loading }: { index: IndexModelState; loading: Loading }) => ({
    index,
    loading: loading.models.index,
  }),
)(IndexPage);

export default Index;
